<template>
  <div class="release">
    <textarea v-model="value1" placeholder=" 随时随地分享"></textarea>
    <br />
    <img
      v-for="(item, index) in imageFrontUrl"
      :key="index"
      :src="item"
      style="width: 100px; height: 100px; margin: 20px"
    />
    <video :src="video" v-if="video_disabled"></video>
    <div class="function" style="margin-left: 40px">
      <vid @click="submitPic" v-if="imageactive">
        <el-upload
          :limit="9"
          action="#"
          list-type="picture"
          :auto-upload="false"
          accept="image/png,image/gif,image/jpg,image/jpeg"
          :on-success="handleSuccess"
          :on-change="imgSaveToUrl"
          :show-file-list="false"
          ref="frontUpload"
        >
          <el-icon>
            <PictureFilled />
          </el-icon>
        </el-upload>
      </vid>
      <div @click="submitVid" v-if="videoactive">
        <el-icon>
          <VideoCameraFilled />
        </el-icon>
      </div>

      <div @click="addEntry"># 添加词条</div>
      <div v-if="showCitiao">
        <el-select v-model="value" clearable placeholder="Select">
          <el-option
            v-for="item in entryList"
            :key="item.entryId"
            :label="item.content"
            :value="item.content"
            @click="selectCitiao"
          />
        </el-select>
      </div>
      <el-button type="success" round @click="submit">发布</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { PictureFilled, VideoCameraFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const imageactive = ref(true)
const videoactive = ref(true)
const videodisabled = ref(true)
const showCitiao = ref(false)
const entryList = ref('')
const value = ref('')
const value1 = ref('')

function nowDate(now) {
  var year = now.getFullYear()
  var month = now.getMonth() + 1
  var date = now.getDate()
  var hour = now.getHours()
  var minute = now.getMinutes()
  var second = now.getSeconds()
  return (
    year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
  )
}

function submitVid() {
  videodisabled.value = !videodisabled.value
}
function addEntry() {
  showCitiao.value = true
  axios({
    url: 'http://localhost:8080/dynamic/ReturnEntry',
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    entryList.value = res.data.data

    console.log(entryList.value)
  })
}
function selectCitiao() {
  value1.value = value1.value + '#' + value.value + '#'
  showCitiao.value = false
}
function submitPic() {
  videoactive.value = false
}
const imageFrontUrl = ref([])
const index1 = ref(0)
function imgSaveToUrl(file) {
  imageFrontUrl.value[index1.value] = URL.createObjectURL(file.raw)
  index1.value = index1.value + 1
  const fileSize = file.size
  const fileType = file.raw.type
  if (!fileSize) {
    ElMessage({
      type: 'error',
      showClose: true,
      message: '无效的文件，请重新选择！'
    })
    logoPicRemove()
    return
  }
  if (fileSize / 1024 / 1024 > 10) {
    ElMessage({
      type: 'error',
      showClose: true,
      message: '请上传小于10M的图片！'
    })
    logoPicRemove()
    return
  }
  if (fileType.indexOf('image') === -1) {
    ElMessage({
      type: 'error',
      showClose: true,
      message: '不是有效的图片文件，或格式不支持，请重新选择!'
    })
    logoPicRemove()
  }
}
function logoPicRemove() {
  imageFrontUrl.value[index1.value - 1] = ''
  index1.value = index1.value - 1
}

function submit() {
  const a = new Date().getTime()
  const b = new Date(a)
  axios({
    url: 'http://localhost:8080/dynamic/Adddynamic',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      text: value1.value,
      time: nowDate(b),
      imagelist: imageFrontUrl.value,
      userId: localStorage.getItem('userSelfId')
    }
  }).then(function (res) {
    alert('发布成功！')
  })
}
</script>

<style lang="scss">
.release {
  bottom: 0rpx;
  overflow: hidden;

  textarea {
    background-color: #fff;
    margin-top: 3rpx;
    width: 90%;
    height: 300px;
  }

  video {
    margin-left: 80rpx;
  }

  image {
    width: 240rpx;
    height: 240rpx;
    margin: 5rpx;
  }

  .function {
    align-items: center;
    background: #fff;
    margin: 30prx 0;
    height: 100rpx;
    width: 100%;
    display: flex;

    view:nth-child(1) {
      margin-left: 20rpx;
    }

    view:nth-child(2) {
      margin-left: 20rpx;
    }

    view:nth-child(3) {
      margin-left: 20rpx;
    }

    button {
      height: 70rpx;
      margin-right: 10rpx;
      font-size: 30rpx;
      width: 20%;
      border-radius: 20rpx;
    }
  }
}
</style>
